<template>
	<div class="task">
		<div class="task-header">
			<div class="task-header-border"></div>
			<div class="task-header-title">
				<i class="task-header-title-icon el-icon-s-grid"></i>
				<h2 class="task-header-title-name">我的项目<span v-if="total>0">（{{total}}）</span></h2>
			</div>
			<div class="task-header-actions">
        <el-tooltip class="item" effect="dark" content="刷新" placement="right">
          <i class="task-header-actions-icon el-icon-refresh"
             :class="[loading == true&&refresh==true?'refreshRe':'']" @click="listclick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="上移" placement="right">
          <i class="el-icon-top upwardTitle" v-if="itemIndex != 0" @click="upClick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="下移" placement="right">
          <i class="el-icon-bottom upwardTitle" v-if="itemIndex != 1" @click="downClick"></i>
        </el-tooltip>
			</div>
		</div>
		<div style="flex: 1;display: flex;flex-direction: column;overflow-y: auto;margin: 2px 12px" v-if="permissionTask()" v-loading="loading">
			<div class="task-content">
				<div class="project-item" v-for="item in projectForm" @click="projectClick(item)">
					<div class="project-item-conent">
						<div class="project-item-conent-header">
							<div class="project-item-conent-header-left">
								<span class="project-item-conent-header-left-title">{{item.name}}</span>
								<el-tag class="project-item-conent-header-left-tag" size="mini" effect="plain">项目标签
								</el-tag>
								<span class="project-item-conent-header-left-subtitle">{{item.number}}</span>
							</div>
						    <div @click.stop>
              				<el-tooltip class="item" effect="dark" :content="item.status|textfilters" placement="right">
                				<i :class="item.status|iconfilters" class="iconfont" :style="item.status|colorfilters"></i>
                			</el-tooltip>
            			</div>
						</div>
						<div class="project-item-conent-box">

						</div>
						<div class="project-item-conent-bottom">
							<div class="project-item-conent-bottom-left">
								<div class="project-item-conent-bottom-logo" v-if="item.masterSysUser">
									<el-image style="width: 100%;height: 100%" :src="item.masterSysUser.avatar?item.masterSysUser.avatar:'https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500'"></el-image>
								</div>
								<span class="project-item-conent-bottom-title">{{item.masterSysUser?item.masterSysUser.userName:'无负责人'}}</span>

							</div>
							<div class="project-item-conent-bottom-right">
								<el-tooltip class="item" effect="dark" content="项目成员" placement="right">
								<div class="project-item-conent-bottom-item">
									<i class="iconfont icon-ren-copy project-item-conent-bottom-item-icon"></i>
									<span class="project-item-conent-bottom-item-title">{{item.userList.length}}</span>
								</div>
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="项目里程碑" placement="right">
								<div class="project-item-conent-bottom-item">
									<i class="iconfont icon-daima-copy project-item-conent-bottom-item-icon"></i>
									<span class="project-item-conent-bottom-item-title">{{item.mptNum}}</span>
								</div>
								</el-tooltip>
								<el-tooltip class="item" effect="dark" content="项目任务" placement="top">
								<div class="project-item-conent-bottom-item">
									<i class="iconfont icon-task project-item-conent-bottom-item-icon"></i>
									<span class="project-item-conent-bottom-item-title">{{item.taskNum}}</span>
								</div>
								</el-tooltip>
							</div>
						</div>
					</div>
				</div>
				<el-empty description="暂无项目" v-if="projectForm.length==0"></el-empty>
			</div>
			<div class="task-pagination">
				<!-- <pagination v-show="total>0" :total="total" :pageSizes='[]' :current.sync="current" :size.sync="size" @pagination="listclick"/> -->
			<el-pagination background
			    layout="total, prev, pager, next"
			    :total="total"
				:page-size="size"
			    :current-page="current"
                @current-change="handleCurrentChange"></el-pagination>
			</div>
		</div>
	  <div v-if="permissionTask() == false">
      <el-empty description="暂无权限" :image="img"></el-empty>
    </div>
	</div>
</template>

<script>
import permissionFunc from "@/utils/permission";
// import {mapGette} from 'vuex'
import pagination from "@/components/Pagination";
import {list} from '@/api/project';
	export default {
		name: "myProject",
		// computed: {
		// 	...mapGetters([
		// 		'permissions'
		// 	])
		// },
		data() {
			return {
				img:require("../../../img/暂无权限.png"),
				loading: false,
				refresh: false,
				great: false,
				projectForm: [],
				current: 1,
      			size:20,
      			total: 0,
			}
		},
		components: {pagination},
		props:['itemIndex'],
		created() {
			this.listclick()
			// 接下来的使用就跟之前一样，初始化图表，设置配置项

		},
		  filters: {
    iconfilters(val){
      if(val=='00'){return 'icon-shuangyuanquan-copy'}
      else if(val=='01'){return 'icon-shuangyuan'}
      else if(val=='02'){return 'icon-yiwancheng-copy'}
      else if(val=='03'){return 'icon-yemian-1'}
    },
    colorfilters(val){
      if(val=='00'){return 'color:rgb(250, 145, 31)'}
      else if(val=='01'){return 'color:rgb(69, 240, 210)'}
      else if(val=='02'){return 'color:rgb(70, 216, 171)'}
      else if(val=='03'){return 'color:rgb(248, 120, 103)'}
    },
    textfilters(val){
      if(val=='00'){return '待确认'}
      else if(val=='01'){return '进行中'}
      else if(val=='02'){return '已完成'}
      else if(val=='03'){return '已关闭'}
    },
  },
		methods: {
		permissionTask(){
       	 return permissionFunc.inserted(['app:proj:list'])
      },
			handleCurrentChange(val){
				this.current=val
				this.listclick()
			},
			async listclick(){
				this.loading = true
				this.refresh = true
				let params=new URLSearchParams()
				params.append('current',this.current)
				params.append('size',this.size)
				params.append('isMaster',1)
				let res= await list(params,false)
				this.projectForm=res.data.records
				this.total=res.data.total
				this.loading = false
				this.refresh = false
			},
			refreshClick() {
				var _this = this
				this.loading = true
				this.refresh = true
				setTimeout(function() {
					_this.loading = false
					_this.refresh = false
				}, 2000)
			},
			currentChange(data) {
				var _this = this
				this.loading = true
				setTimeout(function() {
					_this.loading = false
				}, 2000)
			},
			greatClick() {
				this.great = !this.great
			},
			projectClick(data) {
				    this.$router.push({path: "/project/details",query:{id:data.projId}});
			},
			upClick(){
				this.$emit('upClick',this.itemIndex)
			},
			downClick(){
				this.$emit('downClick',this.itemIndex)
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.task {
		flex-grow: 1;
		height: 400px;
		display: flex;
		flex-direction: column;
		box-shadow: inset 0 0 0 1px #ecedf0;
		background-color: #fff;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
	}

	.task-header {
		flex: none;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 52px;
		padding: 0 24px;
		justify-content: space-between;
		padding-top: 10px;
		margin-top: 10px;
	}

	.task-header-border {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		border-top: 5px solid transparent;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		pointer-events: none;
		border-color: rgb(255, 139, 0);
	}

	.task-header-title {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.task-header-title-icon {
		font-size: 16px;
		margin-right: 4px;
		color: #cce2ff;
	}

	.task-header-title-name {
		min-width: 0;
		margin: 0;
		font-size: 16px;
		line-height: 24px;
		font-weight: 600;
		color: #2e405e;
	}

	.task-header-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.task-header-actions-icon {
		border-radius: 4px;
		cursor: pointer;
		color: #909aaa;
		font-size: 20px;
		line-height: 24px;
		text-align: center;
	}

	.task-content {
		/*padding: 0 12px;*/
		/* display: flex;
		flex-direction: row;
		flex-wrap: wrap; */
		overflow: auto;
	}

	.task-pagination {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 16px;
		padding-top: 16px;
	}

	.project-item {
		padding-left: 12px;
		padding-right: 12px;
		/* max-width: 50%; */
		/* flex-basis: 50%; */
		flex: 1;
		margin-bottom: 12px;
	}

	.project-item-conent {
		padding: 14px 16px;
		background-color: rgb(242, 245, 253);
		flex-grow: 1;
	}

	.project-item-conent-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.project-item-conent-header-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.project-item-conent-header-left-title {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 130px;
		margin-right: 4px;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		color: #24292e;
	}

	.project-item-conent-header-left-tag {
		margin-right: 5px;
		cursor: pointer;
	}

	.project-item-conent-header-left-subtitle {
		color: #909aaa;
		font-size: 14px;
		margin-right: 5px;
		cursor: pointer;
	}

	.project-item-conent-header-right {
		color: #909aaa;
		font-size: 18px;
		cursor: pointer;
	}

	.project-item-conent-header-right-choose {
		color: #ff991f;
		font-size: 18px;
		cursor: pointer;
	}

	.project-item-conent-header-right:hover {
		color: #ff991f;
	}

	.project-item-conent-box {
		flex: 1;
		height: 40px;
		/* background-color: indianred; */
		margin-top: 10px;
	}

	.project-item-conent-bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}

	.project-item-conent-bottom-logo {
		width: 24px;
		height: 24px;
		border-radius: 100%;
		margin-right: 5px;
		overflow: hidden;
	}

	.project-item-conent-bottom-title {
		color: #909aaa;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 100px;
	}

	.project-item-conent-bottom-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 24px;
	}

	.project-item-conent-bottom-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.project-item-conent-bottom-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 8px;
		cursor: pointer;
	}

	.project-item-conent-bottom-item-icon {
		margin-right: 4px;
		color: #909aaa;
		font-size: 12px;
	}

	.project-item-conent-bottom-item-title {
		margin-right: 4px;
		color: #909aaa;
		font-size: 14px;
	}

	.refreshRe {
		-webkit-animation: rotate 1.2s linear infinite;
		/*Safari and Chrome*/
	}

	@keyframes rotate {
		0% {
			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			/* IE 9 */
			-moz-transform: rotate(360deg);
			/* Firefox */
			-o-transform: rotate(360deg);
		}

		100% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			/* IE 9 */
			-moz-transform: rotate(0deg);
			/* Firefox */
			-o-transform: rotate(0deg);
		}
	}

	@-webkit-keyframes rotate {
		0% {
			-moz-transform: rotate(360deg);
		}

		100% {
			-moz-transform: rotate(0deg);
		}
	}

	/*修改element样式*/
	/deep/.el-tabs__nav-wrap::after {
		background-color: white;
	}

	/deep/.el-tabs__item {
		color: #909aaa;
		padding: 0 10px;
	}

	/deep/.el-tabs__item.is-active {
		color: #1890ff;
	}

	.upwardTitle{
		cursor: pointer;
		color: #909aaa;
		font-size: 20px;
		line-height: 24px;
		text-align: center;
		margin-left: 10px;
	}
</style>
